import { ComponentClass } from 'react'
import { connect } from '@tarojs/redux'

import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

import { AtToast, AtForm, AtNoticebar, AtInput, AtTextarea, AtButton } from 'taro-ui'

import { add } from '../../../actions/apply'

import './index.scss'

type PageStateProps = {
  apply: object | {},
}

type PageDispatchProps = {
  add: (object) => void
}

type PageOwnProps = {}

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Apply {
  props: IProps
}

@connect(({ apply }) => ({
  apply
}), (dispatch) => ({
  add(data, callback) {
    dispatch(add(data, callback))
  }
}))
class Apply extends Component {
	config: Config = {
		navigationBarTitleText: '我要上首页'
	}

	state = {
		data: {
			name: '',
			company: '',
			phone: '',
			brief: '',			
		},

		isToastOpened: false,
		toastTips: ''
	}

	componentWillMount() {
		
	}

	handleChange = (key, value) => {
		this.setState(state => ({
			...state,
			data: {
				...state.data,
				[key]: key === 'brief' ? value.target.value : value
			},
		}), () => {
			console.log(this.state.data[key], key, value)
		})
	}

	onSubmit = () => {
		Taro.getSetting().then(e=>{
      if(e.authSetting['scope.userInfo']) { 
      	// 上首页申请
				const values = this.state.data
				let flag = true
				Object.keys(values).forEach(item=>{
					if(String(values[item]).trim() === '') {
						flag = false
						this.setState(state=>({
							...state,
							isToastOpened: true,
							toastTips: `${item} 不能为空！`
						}))
					}
				});
				if(flag) this.props.add(values, () => {
					Taro.showToast({ title: '上首页申请提交成功~', icon: 'none' })
				})
      } else {
        Taro.showToast({ title: '请先登录！', icon: 'none' })
      }
    })
	}

	render() {
		return (
			<View>
				<AtToast isOpened={this.state.isToastOpened} text={this.state.toastTips} />
				<AtNoticebar>首页抽奖为合作推广内容，如需上首页请填写下列信息</AtNoticebar>
				<AtForm
					onSubmit={this.onSubmit.bind(this)}
				>
					<AtInput
						name='name'
						title='个人姓名'
						type='text'
						placeholder='请输入姓名'
						value={this.state.name}
						onChange={this.handleChange.bind(this, 'name')}
					/>
					<AtInput
						name='company'
						title='公司名称'
						type='text'
						placeholder='请输入公司名称'
						value={this.state.company}
						onChange={this.handleChange.bind(this, 'company')}
					/>
					<AtInput
						name='phone'
						border={false}
						title='联系电话'
						type='phone'
						placeholder='请输入联系电话'
						value={this.state.phone}
						onChange={this.handleChange.bind(this, 'phone')}
					/>
					<View className='intro'>
						<View className='title'>
							<Text className='text'>推广简介</Text>
						</View>
						<AtTextarea
							value={this.state.brief}
							onChange={this.handleChange.bind(this, 'brief')}
							maxlength='200'
							placeholder='请输入期望推广的内容简述...'
							className='content'
						/>
					</View>
					<View className='btn-group'>
						<AtButton type='primary' formType='submit'>提交</AtButton>
					</View>
				</AtForm>
			</View>
		)
	}
}

export default Apply as ComponentClass<PageOwnProps, PageState>